<template>
  <div class="bg_img conent text-left" ref="homePage">
    <header style="background-color:white;position:absolute;top:0;left:0;right:0;">
      <nav class="navbar navbar-expand-md navbar-dark container" style="background-color:white;background-image: linear-gradient(to bottom,#fff,#fff);border-color:#f5f5f5;min-width:1200px!important;">
        <ul class="navbar-nav" id="Home" style="position:relative;left:90%;">
          <li class="nav-item">
            <img src="../../static/RSImg/sy.png"  style="width:1.2rem;height:1.2rem;margin-right:10px;margin-bottom:5px;"/>
          </li>
          <li class="nav-item" @click=""><router-link to="yw_Home" style="color: #41bafe">首页</router-link></li>
        </ul>
      </nav>
    </header>
    <div class="contentWrapper_regist" >
      <div class="leftImg"><img src="../../static/RSImg/ch.png" alt=""> </div>
      <div class="right_wrapper" >
        <h2 class="text-center" style="padding-bottom: 30px" >用户注册</h2>
        <cmInput_login class="inputGroup" :path="zcDomain +'static/RSImg/xingming.png'" placeholder="请输入姓名" v-model="user.userName" :value="user.userName"></cmInput_login>
        <div @click="do_unitOut($event)" >
          <cmInput_login :isReadonly="isReadonly"  class="inputGroup" :path="zcDomain +'static/RSImg/danwei.png'" placeholder="请选择学校/单位" v-model="user.workUnit" :value=user.workUnit></cmInput_login>
        </div>
        <cmInput_login class="inputGroup" :path="zcDomain +'static/RSImg/phone (2).png'" placeholder="请输入手机号" imgWith="imgWith" v-model="user.Telephone" :value="user.Telephone" maxlength="11"></cmInput_login>
        <div class="Codewrapper">
          <cmInput_login class="inputGroup" :path="zcDomain +'static/RSImg/yanzhengma.png'" placeholder="请输入验证码" imgWith="imgWith" v-model="user.VerifyCode" :value="user.VerifyCode"></cmInput_login>
          <button class="codeButton" @click="do_getCode" v-text="btntxt" :disabled="disabled" :style="{background:getCode?'grey':'#41bafe' }"></button>
        </div>
        <cmInput_login class="inputGroup" :path="zcDomain +'static/RSImg/mima.png'" placeholder="请输入初始密码" imgWith="imgWith" v-model="user.password" :value="user.password"></cmInput_login>
        <div class="chooseContent"> <span @click="do_addUnit">新增单位</span> <span class="text-right" @click="do_reset">重置</span></div>
        <button  class="btn btn-block mb-2"  type="button" @click="do_regist">马上注册</button>
      </div>

    </div>

    <transition name="fade">
      <cmCofirm
        title="错误"
        confirm="确定"
        :msg=mistakeMsg
        @confirm1="def_confirm($event)"
        v-if="mistake"
      ></cmCofirm>
    </transition>
    <cmUnitSelect v-if="unitShow" @Unit="do_getUnit($event)" @do_close="do_close"></cmUnitSelect>
  </div>
</template>

<script>
  import cmInput_login from './common/cmInput_login'
  import cmCofirm from './common/cmCofirm'
  import cmUnitSelect from "./common/cmUnitSelect"
  export default {
    name: "bsLogin.vue",
    components:{
      cmInput_login,
      cmCofirm,
      cmUnitSelect
    },
    data(){
      return{
        isReadonly:true ,
        unitShow:false,
        clientHeight:'',
        zcDomain:this.$ZcPublic.Domain,
        mistake:false,
        isRegist:true,
        mistakeMsg:'',
        btntxt:'获取验证码',
        user:{Telephone:'', VerifyCode:'', password:'', workUnit:'',userName:''},
        password:'',
        disabled:false,
        getCode:false,
        workUnitSN:''
      }
    },

    methods:{

      def_changeFixed(clientHeight){        //动态修改样式
        console.log(clientHeight);
        this.$refs.homePage.style.height = clientHeight+'px';
      },
      def_confirm(){
        this.mistake=false
      },
      def_time() {
        this.getCode=true
        if (this.time > 0) {
          this.time--;
          this.btntxt=this.time+"s后重新获取";
          setTimeout(this.def_time, 1000);
        } else{
          this.time=0;
          this.btntxt="获取验证码";
          this.disabled=false;
          this.getCode=false
        }
      },
      do_getCode(){
        try {
          let me=this;
          let reg=11 && /^[1]([0-9])[0-9]{9}$/;
          if(me.user.Telephone===''){
            me.mistake=true;
            me.mistakeMsg="请输入手机号"
          }else if(!reg.test(me.user.Telephone)){
            this.mistake=true;
            this.mistakeMsg='手机号格式错误'
          } else{
            me.time=60;
            me.disabled=true;
            me.def_time();

              me.$ZcPublic.Server.Post({
                IsNeedLogin:'false',
                Paras:{
                  Name: 'Vue_CustomerResource',
                  Action: 'Ext_PhoneCode',
                  Data:{
                    Telephone:me.user.Telephone,
                    OrganCode: '01' //此值不需要动
                  }
                },
                Callback:me.cb_do_getCode,
                Scope:me
              });

          }
        }catch (e) {
          zcLogger.Log({
            // Vue : 'zcPerson.vue',
            // Fun : 'doAdd',
            // Msg : e.message
          });
        }
      },
      do_unitOut(event){
        event.preventDefault();
        this.unitShow=true
      },
      do_getUnit(data){
        this.unitShow=false;
        console.log(data);
        this.user.workUnit=data.workUnit;
        this.workUnitSN=data.workUnitSn
      },
      do_close(){
        this.unitShow=false
      },
      do_addUnit(){
        try {
          let reg=11 && /^[1]([0-9])[0-9]{9}$/;
          if(this.user.Telephone==''){
            this.mistake=true;
            this.mistakeMsg='请输入手机号'
          }else if(!reg.test(this.user.Telephone)){
            this.mistake=true;
            this.mistakeMsg='手机号格式错误'
          }
          else {
            localStorage.setItem('addUnit','isRegist')
            localStorage.setItem('userTel',this.user.Telephone)
            this.$router.push('/bsAppendUnit')
          }
        }catch (e) {

        }


      },
      do_reset(){
        this.user={Telephone:'', VerifyCode:'', password:'', workUnit:'',userName:''}
        this.time=0;
        this.btntxt="获取验证码";
      },
      do_regist(){
   try {
     let me=this;
     if(me.user.userName==''){
       me.mistake=true;
       me.mistakeMsg='请输入用户名'
     }
     if(me.user.workUnitSN==''){
       me.mistake=true;
       me.mistakeMsg='请输入选择工作地址'
     }
     if(me.user.VerifyCode==''){
       me.mistake=true;
       me.mistakeMsg='请输入验证码'
     }
     if(me.user.password==''){
       me.mistake=true;
       me.mistakeMsg='请输入初始密码'
     }
     if(me.user.password!=''&&me.user.workUnitSN!=''&&me.user.VerifyCode!=''&&me.user.password!=''){
       me.$ZcPublic.Server.Post({
         IsNeedLogin:'false',
         Paras:{
           Name: 'Vue_CustomerResource',
           Action: 'Ext_ResourceManagement_Register',
           Data:{
             "UserName":me.user.userName,
             "WorkUnitSN":me.workUnitSN,
             "Telephone":me.user.Telephone,
             "VerifyCode":me.user.VerifyCode,
             "InitPass":me.user.password,
             "OrganCode":"01"
           }
         },
         Callback:me.cb_Ext_ResourceManagement_Register,
         Scope:me
       });
     }
   }catch (e) {

   }
      },
/*=====================回调n==================*/
      cb_do_getCode(resJson,scope){
        try{
          console.log(resJson)
        }catch (e) {

        }
      },
      cb_Ext_ResourceManagement_Register(resJson,scope){
        console.log('注册返回')
        let me = this
        console.log(resJson)
        if(resJson.success==true){
          me.$ZcPublic.Server.Post({
            IsNeedLogin:'false',
            Paras:{
              Name: 'Vue_CustomerResource',
              Action: 'Ext_ResourceManagement_Login',
              Data:{
                Telephone: me.user.Telephone,
                Password: me.user.password
              }
            },
            Callback:me.cb_do_login,
            Scope:me
          });

        }else {
          me.mistake=true;
          me.mistakeMsg=resJson.msg
        }
      },
      cb_do_login(resJson,scope){
        let me = this
        if(!resJson.success){
          me.mistake=true;
          me.mistakeMsg=resJson.msg
        }else {

          localStorage.setItem('tel',this.user.Telephone)
          sessionStorage.setItem('UserId',resJson.data.PB_Operator.SN);
          let name=resJson.data.PB_Operator.Name.split('(')[0];
          sessionStorage.setItem("userName",name);
          sessionStorage.setItem("workUnitN",resJson.data.WorkUnitName);
          sessionStorage.setItem("WorkUnitSN",resJson.data.WorkUnitSN);
          if(localStorage.getItem("JumpKey") != 'null' && localStorage.getItem("JumpKey") != '' && localStorage.getItem("JumpKey") != undefined) {

            window.location.href = localStorage.getItem("JumpKey")
            localStorage.removeItem('JumpKey')
          }
          else {

            this.$router.replace({path:'/yw_Home'})
          }
        }
      }
    },
    mounted(){
      // 获取浏览器可视区域高度
      this.clientHeight =   `${document.documentElement.clientHeight}`          //document.body.clientWidth;
      //console.log(self.clientHeight);
      window.onresize = function temp() {
        this.clientHeight = `${document.documentElement.clientHeight}`;
      };
    },
    watch: {
      // 如果 `clientHeight` 发生改变，这个函数就会运行
      clientHeight: function () {
        this.def_changeFixed(this.clientHeight)
      }
    }


  }
</script>

<style scoped>
  .bg_img{
    background-image:url('../../static/RSImg/bg.png');
    background-size: 100% 100%;
    height: 100px;
  }
  /*====================注册======================================*/
  .contentWrapper_regist{
    position: absolute;
    width: 80vw;
    height:600px;
    box-shadow: 3px 3px 5px #b7b7b7;
    top: 52%;
    left: 50%;
    margin-left: -40vw;
    margin-top: -40vh;
    border-radius: 20px;
    display: flex;
    overflow: hidden;
  }
  .leftImg{
    width: 58%;
    height: 100%;

    /*background-image: url("../../static/RSImg/ch.png");*/
  }
  img{
    width: 100%;
    height: 100%;
  }
  .right_wrapper{
    padding:30px 30px;
    width: 42%;
    height: 100%;
  }
  .inputGroup{
    margin-top: 10px;
  }
  .chooseContent{
    height: 60px;
    line-height: 60px;
    width: 100%;

  }
  .chooseContent span:first-child{
    float: left;
  }
  .chooseContent span:last-child{
    float: right;
    margin-right: 30px;
  }
  .chooseContent span:hover{
    cursor:pointer;
    color: #41bafe;
  }
  .btn {
    background-color: #41bafe;
    height: 50px;
    color: white;
    box-shadow: 0rem 0.1rem 0.15rem 0.1rem rgba(65, 186, 254, 0.25);
  }
  .Codewrapper{
    position: relative;
  }
  .Codewrapper .codeButton{
    position: absolute;
    height: 3rem;
    width: 7.5rem;
    top:0.05rem ;
    right: 0;
    border:none;
    outline: none;
    color: white;
    background-color: #41bafe;
    border-bottom-right-radius: 5px;
    border-top-right-radius: 5px;
  }
  .Codewrapper .codeButton:hover{
    cursor:pointer !important;
    background-color: grey !important;
    color: white !important;
  }
  /*=================登录===============*/

  /*彈出框*/
  .fade-enter-active{
    transition: opacity .6s;
  }
   .fade-leave-active{
     transition: opacity .1s;
    }
    .fade-enter, .fade-leave-to {
    opacity: 0;
  }
  .fade-enter-to, .fade-leave {
    opacity: 1;

  }
</style>
